<template>
  <div class="comp" @dblclick="reset">
    <!-- 放置图表的容器 -->
    <div class="chart" ref="map"></div>
  </div>
</template>

<script>
// 引入转换中文 拼音的方法
import  getProvinceMapInfo  from "../../public/static/map.js";
// 引入混入文件模块
import mixin from "@/mixins/index.js";
export default {
    // 使用混入
    mixins:[mixin],
  mounted() {
        // 1.echarts实例初始化 静态配置项设置 基础图表绘制
        this.initEcharts();
        // 2.监听窗口变化实现图表自适应
        window.addEventListener('resize',this.adapTive);
        // 3.调用适配方法
        this.adapTive();
  },
  methods: {
    // 1.echarts实例初始化 静态配置项设置 基础图表绘制
    async initEcharts() {
        // 1.1获取实例
        this.echartsInstance = this.$echarts.init(this.$refs.map, this.themeName);
        // 1.2获取绘制中国地图的经纬度数据
        let {data} = await this.$http.get('http://localhost:8080/static/map/china.json')
        // console.log(data,1111);
        // 1.3注册地理数据
        this.$echarts.registerMap('china',data)
        // 1.4设置绘图需要的静态配置项
        let initOptions={
            // 标题
            title:{
                text:"▌各省区种植面积",
                top:"3%",
                left:"3%"
            }
        }
        // 1.5绘制基础图表
        this.echartsInstance.setOption(initOptions)
         // 1.6获取业务数据
        this.getData();
         // 1.7监听用户的切换省份行为
        this.echartsInstance.on('click',async(info)=>{
            // console.log(info.name);
            // 1.根据省份的中文名字来换取它的地理数据
            let {name,path} = getProvinceMapInfo(info.name)
            // console.log(name,path,2222);
            let {data} = await this.$http.get('http://localhost:8080'+path)
            // console.log(data,3333);
            // 2.注册地理数据切换省份地图
            this.$echarts.registerMap(name,data)
            this.echartsInstance.setOption({
                series:[
                    {
                        map:name,
                        center:undefined,  //自动识别地图的视觉中心
                        zoom:0.9,
                        itemStyle:{
                            areaColor:"orange"
                        },
                        label:{show:true}
                    }
                ]
            })
        })
    },

    // 2.获取业务数据
    async getData(){
        let {data} = await this.$http.get('CropCoverage')
        // console.log(data);
        this.allData = data.content;
        //调用根据业务继续完善图表
        this.setEcharts()
    },

    //3.根据业务继续完善图表
    setEcharts(){
        // 1.设置绘图配置项
        let setOptions={
            // 图表类型
            series:[
                {
                    type:"map",
                    map:'china',
                    data:this.allData,
                    top:"20%",
                    roam:true, //开启平移漫游
                    zoom:1.1  //调整缩放比例
                }
            ],

            // 配置映射组件
            visualMap:{
                calculable:true,  //显示拖拽手柄 
                inRange:{
                    color:["orange","orangered"]
                },
                text:['High','Low'],
                left:"3%",
                bottom:"3%"
            }

        }
        // 2.setOption 合并多次的绘图配置项 完善图表
        this.echartsInstance.setOption(setOptions)

    },

    // 4.窗口适配方法
    adapTive(){
        // 通过比例尺的思想解决坐标系外的适配问题
        let width = this.$refs.map.offsetWidth; 
        // 3.5-3.7
        let scale = width / 100 * 3.6
        // 设置动态需要适配的配置项
        let adapOptions = {
            // 标题
            title:{
                textStyle:{
                    fontSize:scale
                }
            },
        }
        // 适配绘图
        this.echartsInstance.setOption(adapOptions)

        // 处理坐标系内的图图表适配
        this.echartsInstance.resize()
    },

    // 双击返回主页面
    reset(){
        // 还原中国地图
        this.echartsInstance.setOption({
            series:[
                {
                    map:"china",
                    label:{show:false},  //不显示文字
                    zoom:1.1,
                    center:undefined  //自动识别地图的视觉中心
                }
            ]
        })
    }
  },
};
</script>

<style scoped>
</style>